<template>
  <el-drawer
      title="菜单配置"
      :visible.sync="visible"
      :before-close="handleClose"
      :destroy-on-close="true"
      :wrapperClosable="false"
      :size="this.drawerSize"
  >
    <div class="drawer-content">
      <el-row>
        <!--        <el-table-->
        <!--            :data="tableData"-->
        <!--            ref="multipleTable"-->
        <!--            class="table-body"-->
        <!--            :header-cell-style="{background:'#F4F6F9',color:'#1D2129'}"-->
        <!--            :tree-props="{children: 'childMenu'}"-->
        <!--            row-key="menuId"-->
        <!--            @selection-change="handleSelectionChange"-->
        <!--        >-->
        <!--          <el-table-column-->
        <!--              type="selection"-->
        <!--              width="55">-->
        <!--          </el-table-column>-->
        <!--          <el-table-column prop="menuName" label="菜单名称"></el-table-column>-->
        <!--          <el-table-column prop="menuType" label="状态">-->
        <!--            <template slot-scope="scope">-->
        <!--              {{ scope.row.menuType === 0 ? '目录': scope.row.menuType === 1 ? '菜单' : scope.row.menuType === 2 ? '按钮' : '-' }}-->
        <!--            </template>-->
        <!--          </el-table-column>-->
        <!--        </el-table>-->
        <el-tree
            :data="tableData"
            ref="tree"
            show-checkbox
            node-key="menuId"
            :props="defaultProps"
            :default-checked-keys="checkList"
        >
        </el-tree>
      </el-row>
      <el-row style="margin-top: 48px">
        <el-button type="primary" style="margin-bottom: 12px" @click="handleAdd"
        >确定
        </el-button
        >
        <el-button style="margin-bottom: 12px" @click="handleClose"
        >取消
        </el-button
        >
      </el-row>
    </div>
  </el-drawer>
</template>

<script>
import {DRAWER_SIZE} from "@/util/constant";
import {addMenuApi, getRoleMenuListApi} from "@/api/modules/role.api";

export default {
  props: ["tableData"],
  data() {
    return {
      visible: false,
      drawerSize: DRAWER_SIZE,
      id: "",
      menuList: [],
      rowSelectFlag: false,
      checkList: [],
      defaultProps: {
        children: "childMenu",
        label: "menuName",
      },
    };
  },
  methods: {
    async init(id) {
      this.id = id;
      this.visible = true;
      let menuList = await getRoleMenuListApi(id);
      menuList.forEach((menu) => {
        let node = this.$refs.tree.getNode(menu);
        if (node.isLeaf) {
          this.$refs.tree.setChecked(node, true);//如果是子节点，就把状态设置成选中
        }
      })
    },

    async handleAdd() {
      let arr = [];

      let parentIds = this.$refs.tree.getHalfCheckedKeys()
      let childsIds = this.$refs.tree.getCheckedKeys()

      if (parentIds.length > 0) {
        childsIds = childsIds.concat(parentIds)
      }
      childsIds.forEach((item) => {
        arr.push(item);
      });

      const value = Array.from(new Set(arr));
      await addMenuApi({
        roleId: this.id,
        menuId: value,
      });
      this.id = "";
      this.$message({
        message: "成功",
        type: "success",
      });
      this.visible = false;
    },
    handleClose() {
      this.id = "";
      this.visible = false;
    },
    // handleSelectionChange(val) {
    //   this.menuList = val;
    // },
    // handleToggleRow(data) {
    //   this.rowSelectFlag = true;
    //   data.forEach((row) => {
    //     if (row.childMenu) {
    //       this.handleToggleRow(row.childMenu);
    //     }
    //     if (this.checkList.includes(row.menuId)) {
    //       this.$refs.multipleTable.toggleRowSelection(row, true);
    //     }
    //   });
    //   this.rowSelectFlag = false;
    // },
  },
};
</script>
